<template>
    <v-app id="inspire">
        <!-- 侧边栏 -->
        <v-navigation-drawer v-model="drawer" app>
            <!-- 左侧logo -->
            <v-list-item>
                <v-list-item-content>
                    <v-list-item-title class="text-h6">
                        测试平台
                    </v-list-item-title>
                    <v-list-item-subtitle>
                        霍格沃兹
                    </v-list-item-subtitle>
                </v-list-item-content>
            </v-list-item>

            <!-- 左侧导航栏 -->
            <v-list dense nav>
                <v-list-item v-for="item in items" :key="item.title" link :href="item.link">
                    <v-list-item-icon>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title>{{ item.title }}</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

        <!-- 顶部栏 -->
        <v-app-bar app>
            <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
            <v-toolbar-title>测试平台</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn color="purple" dark @click="layout">退出</v-btn>
        </v-app-bar>

        <!-- 主体内容 -->
        <v-main>
            <!-- router-view占位 -->
            <router-view></router-view>
        </v-main>
    </v-app>
</template>

<script>
export default {
    data: () => ({
        drawer: null,
        items: [
            { title: '测试用例', icon: 'mdi-email', link: '#/index/test_case' },
            { title: '测试计划', icon: 'mdi-call-split', link: '#/index/test_plan' },
            { title: '测试报告', icon: 'mdi-arrow-up-bold-box-outline', link: '#/index/test_report' },
        ]
    }),
    methods: {
        // 退出
        layout(){
            localStorage.removeItem('token')
            this.$router.push('/layout')
        }
    }
}
</script>

<style scoped>
</style>>